<template>
    

    <div class="content">

        <div class="head">



            <div style="margin-top: 15px; margin-left: 15px; font-size: 10px; color: #666;">视图</div>

            <div style="margin-top: 10px;margin-bottom: 15px; margin-left: 15px;">
                <el-radio-group v-model="selectedRadio" size="medium" @input="selectType">
                    <el-radio-button label="全部商品"></el-radio-button>
                    <el-radio-button label="已上架"></el-radio-button>
                    <el-radio-button label="待审核"></el-radio-button>
                    <el-radio-button label="审核未通过"></el-radio-button>
                    <el-radio-button label="推荐"></el-radio-button>
                    <el-radio-button label="已售完"></el-radio-button>
                    <el-radio-button label="已下架"></el-radio-button>
                </el-radio-group>
            </div>




        </div>


        <div class="list-box" style="margin-top: 20px;">

            <div style="margin-top: 15px; margin-left: 15px; font-size: 10px; color: #666;">视图</div>

            <div class="search-line" style="margin-top: 15px; margin-bottom: 15px;">

                <div class="text">输入搜索：</div>
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="content_search" style="width: 200px;">
                </el-input>


                <div class="text" style="margin-left: 30px;">选择类目：</div>
                <el-select v-model="type_value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <el-button type="primary" style="width: 100px; margin-left: 15px;">查询</el-button>
            </div>
            <div class="search-line" style="margin-top: 15px; margin-bottom: 15px;">
                <el-button type="primary" @click="putOnTheShelf">上架</el-button>
                <el-button type="success" @click="takeDownShelves">下架</el-button>
                <el-button type="info" @click="deleteClick">删除</el-button>

            </div>

                
            <div>
                <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange" height="800px">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="商品图片" width="180px">
                        <template slot-scope="scope">
                            <img :src="scope.row.image" width="100px" height="70px">
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="创建时间" width="180px">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column label="更新时间" width="180px">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column prop="sortName" label="所属类目" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="inventory" label="库存" width="100px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="auditStatus" label="审核状态" width="100px" show-overflow-tooltip>
                        <template slot-scope="scope">{{ selectAuditStatus(scope.row.auditStatus) }}</template>
                    </el-table-column>
                    <el-table-column prop="address" label="上架状态" width="100px" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.listingStatus == 0 ? '未上架' : '已上架' }}</template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="50">
                </el-pagination>

            </div>


        </div>

        <div></div>
    </div>
</template>

<script>
import { Alert } from 'element-ui';

export default {
    data() {
        return {
            selectedRadio: '全部商品',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            content_search: '',
            type_value: '',
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1



            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
                sortName: '服装>裤子>牛仔裤服装>裤子>牛仔裤',
                inventory: 30,
                auditStatus: 1, //审核状态
                listingStatus: 1
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                image: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: [],
            selectedRows: []
        };
    },

    mounted() {
        console.log("mounted方法执行-----------------------》")
    },


    methods: {
        selectType(label) {
            console.log(label + "------------》")
        },
        selectAuditStatus(auditStatus) {
            switch (auditStatus) {
                case 0:
                    return "未审核"
                case 1:
                    return "已通过"
                case 2:
                    return "已拒绝"
            }
        },
        handleSelectionChange(rows) {
            this.selectedRows = rows
            console.log(this.selectedRows)
        },

        deleteClick() {
            if (this.selectedRows.length === 0) {

                this.$message({
                    message: '请选择要删除的货品',
                    type: 'error'
                });


                return
            }
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }

    }





}
</script>

<style lang="scss">
.content {
    overflow: auto;
    background: white;

    .head {
        flex-direction: column;
        display: flex;
        border: 1px solid #ccc;
        border-radius: 3px;
        align-items: left;

    }

    .list-box {
        flex-direction: column;
        display: flex;
        border: 1px solid #ccc;
        border-radius: 3px;
        align-items: left;

        .search-line {
            margin-left: 15px;
            display: flex;
            align-items: center;
        }

    }
}
</style>